<script setup>
// import { GetListAPI } from '@/api/productionTube/shopAdministration/team'
import {
  getDownUserAPI,
  GetTeaListAPI,
} from "@/api/device/maintenance/workorder.js";
// 子传父
const emit = defineEmits();

// 父传子
const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  //   传入数据 用于回显
  data: {
    type: Object,
    default: () => {},
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  //   传入数据 弹窗标题
  title: {
    type: String,
    default: "",
  },
});

const ruleFormRef = ref(null);

// 表单字段
const ruleForm = reactive({
  repairId: 0,
  repairStartTime: "",
  repairEndTime: "",
  repairDown: 0,
  repairDownDuration: "",
  repairReplace: 1,
  repairAnalysis: "",
  repairDealWith: "",
  maintenancePersonnel: [],
});

/**
 * 班组信息
 */
const teamSel = ref([]);
const tabs = ref("维修信息");
const userList = ref([]);

const validator = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("停机时长"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};

// 表单校验
const rules = reactive({
  time: [{ required: true, message: "请选择开始时间", trigger: "change" }],
  // repairEndTime: [{ required: true, message: '请选择维修结束时间', trigger: 'change' }],
  repairDownDuration: [
    { required: true, message: "请填写停机时长", trigger: "停机时长" },
  ],
  // {
  //   validator:validator
  // }
  teamId: [{ required: true, message: "请填写班组", trigger: "blur" }],
  repairAnalysis: [
    { required: true, message: "请填写故障分析", trigger: "blur" },
  ],
  repairDealWith: [
    { required: true, message: "请填写处理过程", trigger: "blur" },
  ],
});

// 提交方法
const submit = async () => {
  const valid = await ruleFormRef.value.validate();
  console.log(valid);
  if (!valid) return false;
  if (ruleForm.time) {
    ruleForm.repairStartTime = ruleForm.time[0];
    ruleForm.repairEndTime = ruleForm.time[1];
  }
  ruleForm.maintenancePersonnel = ruleForm.maintenancePersonnel.join(",");
  console.log(ruleForm, "ruleForm");
  return ruleForm;
};

// 获取班组
const getDeviceSel = async () => {
  const { data: res } = await GetTeaListAPI();
  teamSel.value = res;
};
getDeviceSel();
// 监听回显
const initData = () => {
  if (props.data?.repairId) {
    Object.keys(props.data).forEach(
      (itemKey) => (ruleForm[itemKey] = props.data[itemKey])
    );
    if (ruleForm.repairBy)
      ruleForm.maintenancePersonnel = ruleForm.repairBy.split(",");
    if (ruleForm.repairStartTime)
      ruleForm.time = [ruleForm.repairStartTime, ruleForm.repairEndTime];

    if (props.title == "执行维修") {
      ruleForm.repairReplace = 2;
      ruleForm.repairDown = 2;
    }
    ruleForm.teamId = ruleForm.teamName;
    ruleForm.teamLeader = ruleForm.chargePerson;
    ruleForm.maintenancePersonnel = ruleForm.groupMemberList.map((t) => t.name);
  }
};

// getDeviceSel()

/**
 * 选择班组
 */
const teamsChange = async (id) => {
  const result = teamSel.value.filter((t) => t.teamId == id)[0] || {};
  ruleForm.maintenancePersonnel = result.personnelList.map((t) => t.value);
  console.log(result);
  ruleForm.personnelList = result.personnelList;
  ruleForm.groupName = result.teamName;
  ruleForm.teamLeader = result.teamLeader;
  ruleForm.teamChargePerson = result.leaderId;
};
initData();
// 导出方法
defineExpose({ submit });
</script>
<template>
  <el-form
    inline
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    status-icon
  >
    <div class="title">维修人员</div>
    <el-divider />
    <el-form-item label="班组" prop="teamId">
      <el-select
        v-model="ruleForm.teamId"
        placeholder="请选择维班组"
        :disabled="props.title != '新增' && props.title != '修改'"
        @change="teamsChange"
        style="width: 240px"
      >
        <el-option
          v-for="item in teamSel"
          :key="item.value"
          :label="item.teamName"
          :value="item.teamId"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="维修负责人">
      <el-input disabled v-model="ruleForm.teamLeader"></el-input>
    </el-form-item>
    <el-form-item label="维修人员" prop="maintenancePersonnel">
      <p-select
        multiple
        v-model="ruleForm.maintenancePersonnel"
        :disabled="props.title != '新增' && props.title != '修改'"
        :option="ruleForm.personnelList"
        placeholder="请选择维修人员"
      />
    </el-form-item>
    <div
      v-if="
        props.title == '执行维修' ||
        props.title == '修改' ||
        props.title == '查看' ||
        props.title == '审核'
      "
    >
      <div class="title">维修内容</div>
      <el-divider />
      <div class="rk">
        <el-form-item label="维修时间" prop="repairWarrantyTime">
          <el-date-picker
            clearable
            style="width: 25% !important"
            disabled
            v-model="ruleForm.repairWarrantyTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            type="date"
            start-placeholder="请选择维修开始时间"
            end-placeholder="请选择维修结束时间"
          />
        </el-form-item>
      </div>
      <el-form-item label="是否停机" prop="repairDown">
        <el-radio-group
          :disabled="props.title != '修改' && props.title != '执行维修'"
          v-model="ruleForm.repairDown"
        >
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="rk">
        <el-form-item label="设备清洁消毒">
          <el-radio-group
            :disabled="props.title != '修改' && props.title != '执行维修'"
            v-model="ruleForm.isClean"
            style="margin-right: 20px"
          >
            <el-radio label="1" size="large">已清洁</el-radio>
            <el-radio label="0" size="large">未清洁</el-radio>
          </el-radio-group>
          <div class="rk">
            <el-radio-group
              :disabled="props.title != '修改' && props.title != '执行维修'"
              v-model="ruleForm.isDisinfection"
            >
              <el-radio label="1" size="large">已消毒</el-radio>
              <el-radio label="0" size="large">未消毒</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
      </div>
      <div class="rk">
        <el-form-item label="工具点检" prop="repairDown">
          <el-radio-group
            :disabled="props.title != '修改' && props.title != '执行维修'"
            v-model="ruleForm.isSpotCheck"
          >
            <el-radio label="1" size="large">已点检</el-radio>
            <el-radio label="0" size="large">未点检</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="rk">
        <el-form-item label="更换配件" prop="repairReplace">
          <div
            style="display: flex; flex-direction: column"
            v-if="JSON.parse(ruleForm.repairReplace)?.length > 0"
          >
            <div
              style="display: flex; margin-bottom: 10px"
              v-for="(item, i) in JSON.parse(ruleForm.repairReplace)"
              :key="i"
            >
              <el-input
                disabled
                v-model="item.spareName"
                style="margin-right: 10px"
              />
              <el-input disabled v-model="item.number" />
            </div>
          </div>
          <div v-else>无</div>
        </el-form-item>
      </div>
      <div class="rk">
        <el-form-item label="故障分析" prop="repairAnalysis">
          <el-input
            :disabled="props.title != '修改' && props.title != '执行维修'"
            clearable
            v-model="ruleForm.repairAnalysis"
            :rows="4"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </div>
      <div class="rk">
        <el-form-item label="处理过程" prop="repairDealWith">
          <el-input
            :disabled="props.title != '修改' && props.title != '执行维修'"
            clearable
            v-model="ruleForm.repairDealWith"
            :rows="4"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
.title {
  color: #2187f8;
}

.rk ::v-deep .el-date-editor {
  width: 40% !important;
}
</style>
